<template>
  <div>
    <div ref="table" style="position: absolute; width: 600px;height:400px;left:20px;top:20px;"></div>
  </div>
</template>

<script>
import { TableSeriesNumber } from '@visactor/vtable-plugins';
import { VTableSheet } from '@visactor/vtable-sheet'
export default {
  name: '',
  props: [],
  components: {},
  data() {
    return {
     tableInstance: null,
    };
  },
  created() {},
  mounted() {
    this.createTable()
  },
  methods: {
    createTable() {
      const container = this.$refs.table
      this.tableInstance = new VTableSheet(container, {
        showFormulaBar: true,
        showSheetTab: true,
        sheets: [
          {
            sheetKey: "employees",
            sheetTitle: "员工信息",
            columns: [
              { title: '姓名', width: 100 },
              { title: '年龄', width: 80 },
              { title: '部门', width: 120 }
            ],
            data: [
              ['张三', 28, '技术部'],
              ['李四', 32, '市场部'],
              ['王五', 25, '技术部']
            ],
            active: true
          }
        ],
        VTablePluginModules: [
          {
            module: TableSeriesNumber,
            moduleOptions: {
              rowSeriesNumberCellStyle: {
              text: {
                  fontSize: 14,
                  fill: 'red',
                  pickable: false,
                  textAlign: 'left',
                  textBaseline: 'middle',
                  padding: [2, 4, 2, 4]
                },
                borderLine: {
                  stroke: '#D9D9D9',
                  lineWidth: 1,
                  pickable: false
                }
              }
            }
          }
        ]
      });
    }
  },
  watch: {},
  computed: {},
};
</script>

<style lang="scss" scoped>
</style>
